<!DOCTYPE html>
<html>
	<head>
		<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
		<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
		<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
		<%@ taglib uri="/WEB-INF/functions.tld" prefix="uf" %>
		<meta charset="utf-8">

		<!-- iPhone, iPad and Android specific settings -->	
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1;">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		
		<title>Final Project - 1.0</title>
		
		<!-- Create an icon and splash screen for iPhone and iPad -->
		<link rel="apple-touch-icon" href="contents/images/images/iOS_icon.png">
		<link rel="apple-touch-startup-image" href="contents/images/images/iOS_startup.png"> 

		<link rel="stylesheet" type="text/css" href="contents/styles/css/all.css" media="screen">
		
		<!-- Style Switcher -->
		<link rel="stylesheet" type="text/css" href="contents/styles/css/switcher.css" media="screen">
		
		<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]-->
		<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /><![endif]-->
			
		<script type="text/javascript" src="contents/javascript/google/google_jquery.min.js"></script>
		<script type="text/javascript" src="contents/javascript/google/google_jquery.ui.min.js"></script>
		
		<!-- Load Interface Plugins -->
		<script src="contents/javascript/plugins.js"></script>
				
		<script type="text/javascript" src="contents/javascript/fancybox/jquery.fancybox-1.3.4.js"></script>
		<script type="text/javascript" src="contents/javascript/quicksand/jquery.quicksand.js"></script>
		<script type="text/javascript" src="contents/javascript/quicksand/custom_sorter.js"></script>
		<script type="text/javascript" src="contents/javascript/quicksand/dash_sorter.js"></script>
		<script type="text/javascript" src="contents/javascript/quicksand/jquery-css-transform.js"></script>
		<script type="text/javascript" src="contents/javascript/quicksand/jquery-animate-css-rotate-scale.js"></script>
		<script type="text/javascript" src="contents/javascript/tinyeditor/tinyeditor.js"></script>
		<script type="text/javascript" src="contents/javascript/jqueryFileTree/jqueryFileTree.js"></script>
		<script type="text/javascript" src="contents/javascript/DataTables/jquery.dataTables.js"></script>
		<script type="text/javascript" src="contents/javascript/slidernav/slidernav.js"></script>
		<script type="text/javascript" src="contents/javascript/utils.js"></script>

		<!-- This file configures the various jQuery plugins for Adminica. Contains links to help pages for each plugin. -->
		<script type="text/javascript" src="contents/javascript/adminica/adminica_ui.js"></script>
		<c:set var="user" value="${uf:getUser(sessionScope.user)}"/>
		
	</head>
	<body>
		<div id="wrapper">
			<div id="topbar" class="clearfix">
				<a href="index.html" class="logo"><span>Final Project 1.0</span></a>
				<div class="user_box round_all">
					<img src="contents/images/${user.userId}-${user.userName}.jpg" width="55" alt="Profile Pic" />
					<h2>${user.role.roleName}</h2>
					<h3><a class="text_shadow" href="#">${user.userName}</a></h3>
					<ul>
						<li><a href="javascript:void(0);" onclick="doLogout();">logout</a></li>
					</ul>
				</div><!-- #user_box -->	
			</div><!-- #topbar -->		
		
			<div id="sidebar">
				<a href="index.html" class="logo"><span>Final Project 1.0</span></a>
				<div class="user_box round_all clearfix">
					<img src="contents/images/${user.userId}-${user.userName}.jpg" width="55px" height="55px" alt="Profile Pic" />
					<h2>${user.role.roleName}</h2>
					<h3><a class="text_shadow" href="#">${user.userName}</a></h3>
					<ul>
						<li><a href="javascript:void(0);" onclick="doLogout();">logout</a></li>
					</ul>
				</div><!-- #user_box -->
				
				<ul id="accordion">
				<c:forEach items="${user.role.features}" var="feature">
					<li>
						<a title="${fn:substring(feature.featureDescription,0,40)}..." href="${feature.featureLink}">${feature.featureName}</a>
					</li>
				</c:forEach>	
				</ul>
			</div>